<template>
  <div>
	  <div class="head">
		<a @click="$router.go(-1)" class="return"></a>
      {{$t('TransactionRules.v1')}}
	</div>
	<div class="overlay">
		<div class="rule" v-html="str">
		<!-- <p>买入流程</p>
		</div>
		<van-steps :active="active" class="steps">
		<van-step>
			<p>预约买入</p>
			<p>T日</p>
		</van-step>
		<van-step>
			<p>开始计息</p>
			<p>T+1</p>
		</van-step>
		<van-step>
			<p>查看收益</p>
			<p>T+2日10:00后</p>
		</van-step>
		</van-steps>
		<van-row class="rule2">
		<van-col span="1" class="title">
			<span></span>
		</van-col>
		<van-col span="23" class="title">
			<span>T日：这里是解释说明这个交易方式什么的，等待确定这里是解释说明这个交易方式什么的，等待确定解释说明这个交易方式什么的，等待确定</span>
		</van-col>
		</van-row>
		<van-row class="rule2">
		<van-col span="1" class="title">
			<span></span>
		</van-col>
		<van-col span="23" class="title">
			<span>TTTT日：这里是解释说明这个交易方式什么的，等待确定这里是解释说明这个交易方式什么的，等待确定解释说明这个交易方式什么的，等待确定</span>
		</van-col>
		</van-row>
		<div class="rule profitRule">
		<p>收益规则</p>
		<p>TTTT日：这里是解释说明这个交易方式什么的，等待确定这里是解释说明这个交易方式什么的，等待确定解释说明这个交易方式什么的，等待确定TTTT日：这里是解释说明这个交易方式什么的，等待确定这里是解释说明这个交易方式什么的，等待确定解释说明这个交易方式什么的，等待确定</p>
     -->
		</div>
  </div>
  </div>
</template>

<script>
import { coinMmoney } from './../utils/api';
export default {
  data() {
    return {
      str:''
    };
  },
  mounted() {
    this.titles()
  },
  methods: {
    titles(){
      // 交易规则
      coinMmoney.WEBCONFIGTRADING_RULES({
      }).then(res => {
        if(res.code ==200){
          if(res.data.value ==''){
            this.str = this.$t('TransactionRules.v2');
          }else{
            this.str =res.data.value
          }
        }
    	})
    }
  }
};
</script>

<style lang="less" scoped>
.cf {
  zoom: 1;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.pr {
  position: relative;
}
.cf:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
.head {
  background: #fff;
  color: #333;
}
.head .return:after {
  border-color: #333;
}
.head .operating /deep/ i {
  vertical-align: middle;
}
.operating {
  color: #333;
}
.overlay {
  background: #f5f5f5;
  overflow-y: scroll;
}
.rule {
  // border-bottom: 1px solid #ededed;
  background: #f5f5f5;
  padding: 10px 15px;line-height:1.5;color:#323232;
  &.profitRule {
    border-bottom: 0;
    p:nth-child(1) {
      border-bottom: 1px solid #ededed;
    }
    p:nth-child(2) {
      color: #999;
      font-size: 12px;
      line-height: 1.5;
    }
  };
  img{
    display: block;max-width:100%;margin:0 auto
  };
  p {
    font-size: 15px;
    color: #666;
    background: #fff;
    padding: 15px;
  }
}
.steps {
  padding: 20px 15px 0;
}
/deep/ .steps .van-step--horizontal .van-step__circle-container {
  top: 28px;
}
/deep/ .steps .van-step--horizontal .van-step__line {
  top: 28px;
  height: 2px;
}
.rule /deep/ img{
  display: block;max-width:100%;margin:10px auto
}
/deep/ .steps .van-step--horizontal .van-step__title p {
  font-size: 13px;
  color: #333;
  text-align: center;
  font-weight: 700;
}
/deep/ .steps .van-step--horizontal:first-child .van-step__title p {
  text-align: left;
}
/deep/ .steps .van-step--horizontal:last-child .van-step__title p {
  text-align: right;
}
/deep/ .steps .van-step--horizontal .van-step__title p:nth-child(2) {
  color: #999;
  margin-top: 22px;
  font-size: 12px;
}
/deep/ .steps.van-steps--horizontal .van-steps__items {
  padding: 0;
}
.rule2 {
  margin: 20px 15px;
}
.rule2 .title span {
  display: block;
  width: 10px;
  height: 10px;
  background: #3fb776;
  margin-top: 4px;
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}
.rule2 .title:nth-child(2) span {
  display: block;
  width: auto;
  height: auto;
  background: #fff;
  margin: 0 0 0 6px;
}
</style>
